<template>
  <div class="main-box">
    <div class="main-tabs">
      <el-tabs
        :model-value="$route.path"
        @tab-change="Replace"
        @tab-remove="
          (name: string) => {
            Remove(name, $route.path === name)
          }
        "
      >
        <el-tab-pane
          v-for="(item, index) in pageTabs"
          :key="index"
          :label="item.meta?.title"
          :name="item.path"
          :closable="item.meta?.closable"
        />
      </el-tabs>
    </div>

    <div class="main-content">
      <router-view v-slot="{ Component }">
        <keep-alive :include="routerInclude">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { storeToRefs } from 'pinia'
import { useStore } from '@/stores'

const { routerInclude, pageTabs } = storeToRefs(useStore())

/** 跳转路由 */
const Replace = (path: string) => {
  router.replace({ path })
}

/** 标签被移除 */
const Remove = (path: string, replace: boolean) => {
  useStore().PageTabsClose(path, replace)
}
</script>

<style scoped lang="scss">
.main-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;

  .main-tabs {
    width: 100%;
    background-color: white;
    padding: 0 20px;
    margin-bottom: 6px;
    border-radius: 4px;
  }

  .main-content {
    width: 100%;
    height: 100%;
  }
}
</style>

<style lang="scss">
.main-box {
  .el-tabs {
    .el-tabs__header {
      margin: 0 !important;
      .el-tabs__nav-wrap:after {
        background-color: transparent !important;
      }
    }
  }
}
</style>
